<template>
    <div>
        <el-card class="xj-table">
            <div class="xj-table-tree xj-table-tree-hide">
                <el-card>
                    <avue-tree ref="treeNumber" :option="treeOption" :data="treeData" @node-click="nodeClick">
                        <!-- 图标/文字- 根据根据不同内容展示不同图标,或者不要 -->
                        <template #="{node,data}">
                            <span style="margin-left: 0px">{{ data.name }}</span>
                        </template>
                        <!-- 右键按钮  -->
                        <template #menu="{node}">
                            <div class="avue-tree__item" @click="updRow(node.data,1)"><i class="el-icon-plus"> 顶级</i></div>
                            <div class="avue-tree__item" @click="updRow(node.data,2)"><i class="el-icon-plus"> 子级</i></div>
                            <div class="avue-tree__item" @click="updRow(node.data,4)"><i class="el-icon-edit"> 编辑</i></div>
                            <div class="avue-tree__item" @click="updRow(node.data,6)"><i class="el-icon-delete"> 删除</i></div>
                            <div class="avue-tree__item" @click="updRow(node.data,5)"><i class="el-icon-refresh"> 刷新</i></div>
                        </template>
                    </avue-tree>
                </el-card>
            </div>
            <div class="xj-table-list">
                <avue-crud ref="crudNumber"
                           :data="data"
                           :option="option"
                           v-model:page="page"
                           v-model:search="search"
                           :table-loading="loading"
                           :cell-style="cellStyle"
                           @on-load="onLoad"
                           @refresh-change="onLoad"
                           @search-change="searchChange"
                           @row-click="handleRowClick">
                    <template #menu-left="{size}">
                        <span><!--  防抖动--> </span>
                    </template>
                    <!-- 启用/禁用插槽(默认提供,按需使用) -->
                    <template #disable="{size,row,index}">
                        <el-switch v-model="row.disable" @change="updDisable(row,index,row.disable)"
                                   :active-value=0 :inactive-value=1
                                   active-text="" inactive-text="">
                        </el-switch>
                    </template>
                    <template #lastTime-search="{size}">
                        <div class="block">
                            <el-date-picker
                                v-model="search.lastTime"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                type="datetimerange"
                                :shortcuts="defaultdata.timeOptions.shortcuts"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </template>
                    <template #menu="{scope,row,size,index}">
                        <el-button type="primary" :size="size" text icon="el-icon-edit" @click="updRow(row,4)">编辑</el-button>
                        <el-button type="primary" :size="size" text icon="el-icon-delete" @click="rowDel(row,index)">删除</el-button>
                    </template>
                </avue-crud>
            </div>
        </el-card>
        <el-dialog draggable :title="rowData.operationType===1?'添加顶级数据':'新增数据'"
                   v-if="addDialogVisible" v-model="addDialogVisible" :width="dialogWidth" top="6vh" @close="closeDialog">
            <Add @closeDialog="closeDialog" :uri="uri" :rowData="rowData"></Add>
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>
        <el-dialog draggable title="编辑数据" v-if="updDialogVisible" v-model="updDialogVisible" :width="dialogWidth" top="6vh" @close="closeDialog">
            <Upd @closeDialog="closeDialog" :uri="uri" :rowData="rowData"></Upd>
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>
    </div>
</template>

<script>
import {defineAsyncComponent} from 'vue';

export default {
    components: {
        Add: defineAsyncComponent(() => import('./numberAdd.vue')),
        Upd: defineAsyncComponent(() => import('./numberUpd.vue')),
    },
    data() {
        return {
            treeOption: JSON.parse(JSON.stringify(this.website.treeOption)),
            uri: {
                infoTree: "/api/admin/sys/number/tree",
                infoList: "/api/admin/sys/number/findPage",
                info: "/api/admin/sys/number",
            },
            loading: true,
            dialogWidth: "60%",
            addDialogVisible: false,      // 添加弹层开关状态
            updDialogVisible: false,      // 添加弹层开关状态
            updPidDialogVisible: false,      // 变更父级开关状态
            page: this.website.pageParams,   // 分页参数
            search: {},                      // 搜索参数
            treeData: [],                 // 左侧树数据
            pidDic: [],                   // 弹层选择父级树结构数据
            data: [],                     // 右侧列表数据
            rowData: {},                  // 当前选中行数据(如果在树列表上点击，则为树的当前行数据, 如果在列表上点击，则为列表行数据)
            option: {},                   // 列表配置
            treeRowId: ""                 // 左树当前选中的id
        }
    },
    activated:
        function () {
            this.crud.doLayout(this, this.$refs.crudNumber)
        }
    ,
    async mounted() {
        // 左侧菜单配置
        this.treeOption.props.label = "name";
        this.treeOption.props.children = "children";
        this.treeOption.menu = true;
        this.treeOption.defaultExpandAll = false;
        // 查询左侧菜单数据
        await this.findLeftTree();

        // 2、右侧表格配置(树结构)
        this.option = JSON.parse(JSON.stringify(this.website.optionConfig));
        this.option.index = true;
        this.option.cellBtnt = true
        this.option.column = [
            {
                label: '层级 ',
                prop: 'hierarchy',
                type: 'select',
                search: true,
                searchSpan: 5,
                filterable: true,
                overHidden: true,
                dicData: this.dict.get('HIERARCHY'),
            },
            {
                label: '父级 ',
                prop: 'pid',
                search: true,
                searchSpan: 5,
                overHidden: true,
                type: 'tree',
                // 在 mounted 事件使用 let res = await this.crud.get() 同步获取数据替换字典数据
                dicData: this.treeData,
                props: {
                    value: "id",
                    label: "name",
                    children: "children"
                },
            },
            {
                label: '标题',
                prop: 'name',
                search: true,
                searchSpan: 5,
                filterable: true,
                overHidden: true,
            },
            {
                label: 'code',
                prop: 'code',
                search: true,
                searchSpan: 5,
                filterable: true,
                overHidden: true,
            },
            {
                label: '前缀',
                prop: 'prefix',
                type: 'select',
                search: false,
                searchSpan: 5,
                filterable: true,
                overHidden: true,
                dicData: this.dict.get('DEFAULT'),
            },
            {
                label: '时间格式 ',
                prop: 'timeFormat',
                type: 'select',
                search: false,
                searchSpan: 5,
                filterable: true,
                overHidden: true,
                dicData: this.dict.get('TIME_FORMAT'),
            },
            {
                label: '初始自增值 ',
                prop: 'initIncrement',
                search: false,
                searchSpan: 5,
                overHidden: true,
            },
            {
                label: '当前自增值 ',
                prop: 'increment',
                search: false,
                searchSpan: 5,
                overHidden: true,
            },
            {
                label: '自增值位数 ',
                prop: 'incrementLen',
                search: false,
                searchSpan: 5,
                overHidden: true,
            }, {
                label: '最后 key ',
                prop: 'lastKey',
                search: false,
                searchSpan: 5,
                overHidden: true,
            },
            {
                label: '最后生成',
                prop: 'lastNo',
                type: 'select',
                search: false,
                searchSpan: 5,
                filterable: true,
                overHidden: true,
                dicData: this.dict.get('DEFAULT'),
            },
            {
                label: '生成时间',
                prop: 'lastTime',
                search: false,
                searchSpan: 10,
                overHidden: true,
            },
            {
                label: '备注',
                prop: 'remarks',
                search: false,
                searchSpan: 5,
                overHidden: true,
            },

        ]
    },
    created() {
    },
    methods: {
        onLoad() {
            this.crud.list(this, true);
            this.crud.doLayout(this, this.$refs.crudNumber);
        },
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad();
            done();
        },
        async findLeftTree() {
            let res = await this.crud.get(this.uri.infoTree);
            this.pidDic = JSON.parse(JSON.stringify(res.data.data));
            this.pidDic.unshift({id: '0', name: '无'});
            this.treeData = res.data.data;
            this.treeData.unshift({id: '0', name: '顶级数据'});
            this.treeData.unshift({id: '', name: '全部数据'});
            // 设置默认选中和自动展开
            if (this.treeRowId != null && this.treeRowId !== '') {
                this.treeOption.defaultExpandedKeys = [this.treeRowId];
                this.$nextTick(() => {
                    this.$refs.Number.setCurrentKey(this.treeRowId);
                })
            }
        },
        // 点击左左侧数据 重置右列表数据
        nodeClick(data) {
            //this.$message.success(JSON.stringify(data))
            this.rowData = data;
            this.search.pid = data.id;
            this.onLoad();
        },

        closeDialog(isRefresh, dataId) {
            this.addDialogVisible = false;
            this.updDialogVisible = false;
            this.updPidDialogVisible = false;
            this.rowData = {};
            if (isRefresh != null && isRefresh) {
                this.onLoad();
            }
            // 左侧树结构数据更新
            if (dataId != null && dataId) {
                this.treeRowId = dataId;
                this.findLeftTree();
            }
        },
        // 行操作
        updRow(row, type) {
            this.rowData = row;
            switch (type) {
                case 1:
                    // +顶级数据
                    this.rowData.operationType = 1;
                    this.rowData.pid = "0";
                    this.rowData.pidDic = this.pidDic;
                    this.addDialogVisible = true;
                    break;
                case 2:
                    // +子级数据
                    this.rowData.operationType = 2;
                    this.rowData.pid = row.id;
                    this.rowData.pidDic = this.pidDic;
                    this.addDialogVisible = true;
                    break;
                case 3:
                    break;
                case 4:
                    // 编辑
                    this.rowData.pidDic = this.pidDic;
                    this.updDialogVisible = true;
                    break;
                case 5:
                    // 刷新
                    this.findLeftTree();
                    break;
                case 6:
                    // 删除(左边树上删除)
                    this.rowDel(row);
                    break;
                default:
                    this.$message.error('操作类型错误');
                    break;
            }
        },
        // 行删除
        rowDel(row) {
            this.$confirm('此操作将永久删除【' + row.name + '】以及子数据,是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.crud.del(this.uri.info + "/" + row.id).then(() => {
                    // 删除后刷新列表数据
                    this.onLoad();
                    // 更新树结构数据
                    this.$refs.treeNumber.remove(row.id)
                })
            })
        },
        // 启用/禁用
        updDisable(row, index, disable) {
            if (row.id != null && this.rowData.disable != row.disable) {
                this.crud.put(this.uri.info + "/" + row.id, {disable: row.disable});
            }
        },
        // 点击保存行数据(供行操作的任意地方获取数据)
        handleRowClick(row) {
            this.rowData = JSON.parse(JSON.stringify(row));
        },
        // 自动配置,单元格样式数字，对指定列设置字体颜色,大小，粗细等
        cellStyle({row, column}) {
            if (column.property == "disable") {
                // fontWeight: 'bold',fontSize: '20'
                return row.disable == 0 ? {color: 'green'} : {color: 'red'}
            }
        },
    }
}
</script>
